<script setup lang="ts">

defineOptions({
  name: 'VipIcon',
})

interface PropsType {
  /** Iconify icon name */
  icon?: string;
  isCustomSvg?: boolean;
}

const props = defineProps<PropsType>()

const attrs = useAttrs()

const bindAttrs = computed<{ class: string; style: string }>(() => ({
  class: (attrs.class as string) || '',
  style: (attrs.style as string) || '',
}))

const symbolId = computed(() => `#vip-icon-${props.icon}`)

// 给图标添加上类名
// const svgClass = computed(() => {
//   if (props.className) {
//     return `svg-icon ${props.className}`;
//   }
//   return 'svg-icon';
// });
</script>

<template>
  <template v-if="isCustomSvg">
    <svg aria-hidden="true" class="vip-icon" v-bind="bindAttrs">
      <use fill="currentColor" :xlink:href="symbolId" />
    </svg>
  </template>
  <template v-else>
    <i aria-hidden="true" :class="`ri-${icon}`" v-bind="bindAttrs"></i>
  </template>
</template>

<style lang="scss" scoped>
.vip-icon {
  display: inline-block;
  width: var(--el-font-size-big);
  height: var(--el-font-size-big);
  margin: 0 auto;
  overflow: hidden;
  vertical-align: top;
  fill: currentColor;
  //vertical-align: -2px;
}

[class*='ri'] {
  display: inline-block;
  font-size: var(--el-font-size-big);
  text-align: center;
  vertical-align: 0;
}
</style>
